<template>
	<view class="container box-b">
		<!-- container -->
		<view class="f36 g6 df ac jsa top-filter">
			<view
				class="flex-1 lh80 df ac jsc"
				:class="item.checked ? 'g4' : ''"
				v-for="(item, index) in filterArr"
				:key="index"
				@tap="openFilter(item)"
			>
				<view class="w80 text-over tc">{{ item.name }}</view>
				<text
					class="triangle mt10 ml10"
					:class="item.checked ? 'bottom-act' : 'bottom-def'"
					v-if="item.type !== 'complaint'"
				></text>
			</view>
		</view>
		<view class="list-content">
			<view
				class="box-bd mb20"
				v-for="(item, index) in dataList"
				:key="index"
			>
				<view @tap="oeprate('details', item)">
					<view class="text-over lh80">{{ item.title }}</view>
					<view class="lh60 f32">
						填报周期：{{
							item.type === 0
								? item.beginTime.replace(/-/g, '/')
								: item.type === 1
								? item.beginTime.replace(/-/g, '/') +
								  '~' +
								  item.endTime.replace(/-/g, '/')
								: item.beginTime.slice(0, 7).replace('-', '/') +
								  '月'
						}}
					</view>
					<view class="lh60 f28 g9 bd-bottom-e df jsb">
						<view
							>提交时间：{{
								item.journaStatus === 2
									? item.commitTime
									: '暂未提交'
							}}</view
						>
						<view class="g63" v-if="item.journaStatus === 1"
							>继续编辑草稿</view
						>
					</view>
				</view>
				<view class="df ac h100 f32">
					<view class="w30 g9">类型：{{ item.typeName }}</view>
					<view class="w40 g9 text-over"
						>来源：{{
							item.userId === userId ? '本人' : item.userName
						}}</view
					>
					<view class="w30 tr">
						<view
							class="danger-color"
							v-if="
								item.readStatus === 3 && item.userId !== userId
							"
							>提交人已删除</view
						>
						<button
							class="danger-button plain small-size w60 mr0"
							v-if="item.userId === userId && item.readStatus < 3"
							@tap="oeprate('del', item)"
						>
							删除
						</button>
					</view>
				</view>
			</view>
			<diy-empty v-if="dataList.length === 0"></diy-empty>
		</view>

		<view
			class="bottom-button-bd"
			@tap="oeprate('report', {})"
			style="z-index: 5"
			><button class="primary-button linear w90">写汇报</button></view
		>
		<uni-popup ref="delAlertDialog" type="dialog">
			<uni-popup-dialog
				type="center"
				cancelText="取消"
				confirmText="确认"
				title="提示"
				:content="dialogContent"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
		<!--筛选下拉框-->
		<view v-if="filterPopupShow" class="filter-popup">
			<view class="filter-bd">
				<view class="filter-content f36">
					<scroll-view :scroll-y="true" style="max-height: 640rpx">
						<view
							class="pd20 mt20"
							v-if="contentTypeVal === 'date'"
						>
							<uni-datetime-picker
								v-model="rangeDate"
								type="daterange"
								rangeSeparator="至"
								@change="chooseRangeDate"
							></uni-datetime-picker>
						</view>
						<view
							v-if="contentTypeVal === 'dailyType'"
							class="pd20 df fx-wp"
						>
							<view
								class="ml20 time-item"
								v-for="(item, index) in reportTypeList"
								:key="index"
								@tap="selectValue('dailyType', item)"
								:class="item.checked ? 'active-time' : ''"
							>
								{{ item.name }}
							</view>
						</view>
						<view
							v-if="contentTypeVal === 'resourceSearch'"
							class="pd20"
						>
							<uni-search-bar
								placeholder="搜索来源人姓名"
								v-model="searchParam.userName"
								@input="inputSearch"
								@confirm="resourceSearch"
								@cancel="resourceCancel"
							></uni-search-bar>
						</view>
					</scroll-view>
				</view>
				<view
					class="filter-bottom"
					v-if="contentTypeVal !== 'resourceSearch'"
				>
					<view class="default-button circle w45 mr10" @tap="reset"
						>重置</view
					>
					<view
						class="primary-button linear w45 ml10"
						@tap="handleSearch"
						>确定</view
					>
				</view>
			</view>
			<view
				class="filter-popup-mask"
				@tap="closeFilter"
				catchtouchmove="true"
			></view>
		</view>

		<!--选择总结类型-->
		<uni-popup ref="chooseDailyType" class="choose-popup">
			<view class="popup-center-bd pd20">
				<radio-group @change="chooseReportType">
					<label v-for="item in dailyType" :key="item.id">
						<view
							class="df ac list-card mb20"
							:class="{ active: chooseReportVal === item.id }"
						>
							<view class="w10"
								><radio
									:value="item.id"
									:checked="chooseReportVal === item.id"
									color="#3a9bff"
								></radio
							></view>
							<view class="w90">
								<view class="f40">{{ item.typeName }}</view>
								<view class="f32 g9 word-break">{{
									item.description || ''
								}}</view>
							</view>
						</view>
					</label>
				</radio-group>
				<view
					><button
						class="primary-button linear w50"
						@tap="submitChooseReport"
					>
						进入填写
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const dayjs = require('@/common/dayjs.min.js')
export default {
	options: {
		styleIsolation: 'shared',
	},
	props: {
		type: {
			type: Number,
			// default: 0 //2总结，3建议
		},
	},
	data() {
		return {
			dayjs,
			dailyCheckAll: false,
			filterPopupShow: false,
			filterStartDate: '',
			filterEndDate: '',
			filterArr: [
				{
					type: 'date',
					name: '提交时间',
					checked: false,
				},
				{
					type: 'resourceSearch',
					name: '来源',
					checked: false,
				},
				{
					type: 'dailyType',
					name: '类型',
					checked: false,
				},
			],
			contentTypeVal: '',
			currentDate: '',
			searchParam: {
				userName: '', //来源人
				type: '',
				pageIndex: 1,
				pageSize: 10,
				userType: 0,
				commitTimeBegin: '',
				commitTimeEnd: '',
			},
			chooseItem: {
				id: '',
			},
			dataList: [],
			hasMore: false,
			dialogContent:
				'是否删除该内容？删除后该条内容不展示在当前提交人列表中.',
			dailyType: [],
			chooseReportVal: 1,
			reportTypeList: [
				{
					name: '日报',
					value: 0,
					checked: false,
				},
				{
					name: '周报',
					value: 1,
					checked: false,
				},
				{
					name: '月报',
					value: 2,
					checked: false,
				},
			],
			userId: uni.getStorageSync('userId'),
			rangeDate: [],
		}
	},
	created() {
		this.userId = uni.getStorageSync('userId')
		this.getList()
	},
	mounted() {
		uni.$on('onReachBottom', (val) => {
			if (this.hasMore && val !== 1) {
				this.searchParam.pageIndex = this.searchParam.pageIndex + 1
				this.getList()
			}
		})
	},
	methods: {
		isRefresh() {
			setTimeout(() => {
				this.reset()
			}, 300)
		},
		handleSearch() {
			this.filterPopupShow = false
			this.hasMore = false
			this.searchParam.pageIndex = 1
			this.dataList = []
			this.getList()
			this.changeTabName()
		},
		//更改筛选类型名称
		changeTabName() {
			if (this.searchParam.type || this.searchParam.type === 0) {
				this.filterArr[2].name =
					this.reportTypeList[this.searchParam.type].name
			} else {
				this.filterArr[2].name = '类型'
			}
		},
		async reset() {
			this.searchParam.pageIndex = 1
			this.dataList = []
			this.hasMore = false
			this.dailyCheckAll = false
			this.filterPopupShow = false
			this.filterStartDate = ''
			this.filterEndDate = ''
			this.reportTypeList.forEach((item) => {
				item.checked = false
			})
			this.searchParam.userName = ''
			this.searchParam.commitTimeBegin = ''
			this.searchParam.commitTimeEnd = ''
			this.searchParam.type = ''
			this.rangeDate = []
			this.getList()
			this.changeTabName()
		},

		selectAll(type) {
			if (type === 'dailyType') {
				this.dailyCheckAll = !this.dailyCheckAll
				this.reportTypeList.forEach((item) => {
					item.checked = this.dailyCheckAll ? true : false
				})
			}
		},
		//选择时间区间
		chooseRangeDate(event) {
			if (event && event.length) {
				this.searchParam.commitTimeBegin = event[0]
				this.searchParam.commitTimeEnd = event[1]
			} else {
				this.searchParam.commitTimeBegin = ''
				this.searchParam.commitTimeEnd = ''
			}
		},
		//选择开始时间
		chooseStartDate(event) {
			if (event) {
				this.searchParam.commitTimeBegin = event
			} else {
				this.filterStartDate = ''
				// this.initFilterDate()
			}
		},
		//选择结束时间
		chooseEndDate(event) {
			if (event) {
				// this.filterDateArr.forEach(item => {
				// 	item.checked = false
				// })
				this.searchParam.commitTimeEnd = event
				// this.searchParam.pushTimeSort = 4
			} else {
				this.filterEndDate = ''
				// this.initFilterDate()
			}
		},
		getList() {
			let params = {
				...this.searchParam,
				orgId: uni.getStorageSync('orgId'),
			}
			uni.showLoading({
				title: '加载中...',
			})
			this.$request
				.request('carer-platform/journal/workJournal/page', {
					method: 'post',
					data: params,
				})
				.then((res) => {
					uni.hideLoading()
					if (res.success) {
						if (this.searchParam.pageIndex == 1) {
							this.hasMore = true
							this.dataList = res.data.data || []
							return
						} else {
							if (res.data.data && res.data.data.length > 0) {
								this.dataList = this.dataList.concat(
									res.data.data
								)
								this.hasMore = true
							} else {
								this.hasMore = false
							}
						}
					}
				})
		},
		//选择日期
		dateChange(e) {
			this.currentDate = e.detail.value
			this.getList()
		},
		//打开筛选框
		openFilter(row) {
			this.filterArr.forEach((item) => {
				item.checked = false
				if (row.type === item.type) {
					item.checked = true
				}
			})
			this.contentTypeVal = row.type
			this.filterPopupShow = true
			// if (row.type !== 'date') {
			// this.$refs.popup.open('top')
		},
		selectValue(type, data) {
			if (type === 'dailyType') {
				this.searchParam.type = data.value
				this.reportTypeList.forEach((item) => {
					item.checked = false
					if (item.value === data.value) {
						item.checked = true
					}
				})
			}
		},
		//操作
		oeprate(type, rowData) {
			if (type === 'del') {
				this.chooseItem = rowData
				this.$refs.delAlertDialog.open()
			} else if (type === 'report') {
				this.getReportTemplate(() => {
					this.chooseReportVal = ''
					this.$refs.chooseDailyType.open('center')
				})
			} else {
				if (rowData.journaStatus === 2) {
					this.chooseItem = rowData
					const type = 'approval'
					uni.navigateTo({
						url: `/subPackagesLog/pages/workLog/reportDetail?id=${rowData.id}&type=${type}`,
					})
				} else {
					uni.navigateTo({
						url: `/subPackagesLog/pages/workLog/addReport?reportId=${
							rowData.id
						}&reportType=${rowData.type + 1}&typeId=${
							rowData.templateId
						}&staticStart=${rowData.beginTime}&staticEnd=${
							rowData.endTime
						}`,
					})
				}
			}
		},
		//删除确认
		dialogConfirm() {
			this.$request
				.request('carer-platform/journal/workJournal/delete', {
					method: 'post',
					data: {
						id: this.chooseItem.id,
					},
				})
				.then((res) => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
						})
						this.searchParam.pageIndex = 1
						this.dataList = []
						this.hasMore = false
						this.getList()
					}
				})
		},

		//获取模板列表
		getReportTemplate(func) {
			let _that = this
			this.$request
				.request('carer-platform/journal/workJournalTemplate/list', {
					data: {
						orgId: uni.getStorageSync('orgId'),
					},
				})
				.then((res) => {
					if (res.success) {
						_that.dailyType = res.data
						if (_that.dailyType && _that.dailyType.length > 0) {
							_that.dailyType.forEach((item) => {
								_that.$set(item, 'checked', false)
							})
							func && func()
						} else {
							uni.showModal({
								title: '提示',
								content:
									'未配置工作汇报填写模版，请联系系统管理员添加。',
								showCancel: false,
							})
						}
					}
				})
		},
		//删除取消
		dialogClose() {},
		//关闭筛选框
		closeFilter() {
			this.filterPopupShow = false
		},
		//来源输入搜索
		inputSearch(event) {
			this.searchParam.userName = event
			this.getList()
		},
		//来源输入搜索
		resourceSearch(event) {
			this.searchParam.userName = event.value
			this.getList()
			this.closeFilter()
		},
		//来源输入取消
		resourceCancel() {
			this.searchParam.userName = ''
			this.getList()
		},
		//选择填报类型
		chooseReportType(event) {
			this.chooseReportVal = parseInt(event.detail.value)
		},
		//进入填写
		submitChooseReport() {
			if (!this.chooseReportVal) {
				uni.showToast({
					title: '请选择填报类型',
					icon: 'none',
				})
			} else {
				let typeInfo = this.dailyType.find(
					(res) => res.id === this.chooseReportVal
				)
				this.$refs.chooseDailyType.close()
				let reportType = typeInfo.type + 1
				uni.navigateTo({
					url:
						'/subPackagesLog/pages/workLog/addReport?reportType=' +
						reportType +
						'&typeId=' +
						this.chooseReportVal,
				})
			}
		},
	},
	watch: {
		type(val) {
			this.searchParam.pageIndex = 1
			this.dataList = []
			this.hasMore = false
			this.currentDate = ''
			this.filterPopupShow = false
			this.filterArr = []
			this.getList()
		},
	},
	// onReachBottom(e) {
	// 	console.log(e + 'child')
	// }
}
</script>

<style scoped lang="scss">
.container {
	background-color: #ffffff;
	padding: 10rpx 20rpx;
	min-height: 100vh;
	font-size: 36rpx;
	padding-bottom: 160rpx;
	.box-bd {
		border-radius: 10rpx;
		padding: 20rpx;
		.nav-tag {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 32rpx;
			padding: 0 20rpx;
		}
		.nav-tag-act {
			// background-color: #f4fbfa;
		}
	}
}
.time-item {
	border: 2rpx solid $primary-color;
	color: $primary-color;
	font-size: 36rpx;
	margin: 10rpx 15rpx 10rpx 0;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
}
.active-time {
	color: #fff;
	background-color: $primary-color;
	border: 2rpx solid $primary-color;
}
.list-content {
	padding-top: 120rpx;
}
.top-filter {
	padding: 15rpx 20rpx;
	box-sizing: border-box;
	background: #fff;
	position: fixed;
	z-index: 10000;
	width: 100%;
	left: 0;
	top: 100rpx;
	border-bottom: 2rpx #eeeeee solid;
	box-shadow: 0px -2px 16px 0px rgba(0, 0, 0, 0.08);
}
.content-item {
	margin-top: 200rpx;
	padding: 30rpx 20rpx 50rpx 20rpx;
	background: #fff;
}

.nav-tag {
	// flex: 1;
	margin-left: 10rpx;
	margin-right: 10rpx;
	height: 60rpx;
	padding: 10rpx 15rpx;
	line-height: 60rpx;
	font-size: 32rpx;
	border: 2rpx solid $primary-color;
	color: $primary-color;
}

.filter-popup {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
}
.filter-popup-mask {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	background-color: #000000;
	opacity: 0.2;
}

.filter-bd {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	background-color: #ffffff;
	max-height: 700rpx;
	z-index: 99;
}

.filter-content {
	padding-top: 200rpx;
	max-height: 640rpx;
	/deep/.uni-datetime-picker--btn {
		background: linear-gradient(90deg, #2e95ff 0%, #94c9ff 100%) !important;
	}
}

.filter-bottom {
	height: 110rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.popup-center-bd {
	width: 90vw;
	max-height: calc(100vh - 500rpx);
	background-color: #fff;
	border-radius: 20rpx;
	.list-card {
		border: 2rpx #999999 solid;
		padding: 20rpx;
		border-radius: 10rpx;
		&.active {
			border: 2rpx $active-color solid;
		}
	}
}
</style>
